<template>
  <div>
   
    <div v-if="isCustom"></div>

    <div
      v-else
      class="wrap"
      :style="searchStyle"
      ref="element"
    >
      <div v-if="isShowSearch">
        <van-search
          class="common_search"
          @search="confirm"
          @clear="clear"
          v-model="searchVal"
          :placeholder="placeholder"
          :maxlength="maxlength"
        />
        <van-dropdown-menu
          v-if="this.filterTab"
          active-color="#00c1de"
          style="background-color: #fff; margin: 5px 10px"
        >
          <van-dropdown-item
            v-for="(item, index) in this.filterParams"
            :key="index"
            :options="item.data"
            @change="handleChange($event, item)"
            :title="item.title"
          />
        </van-dropdown-menu>
      </div>
      <slot
        v-else
        name="search"
      ></slot>
    </div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <van-list
      :finished="finished"
      v-model="loading"
      finished-text="没有更多了"
      :style="'margin: 0px 10px;padding-top: ' + listPaddingTop"
      @load="loadMore"
    >
      <slot
        name="list"
        :data="list"
      > </slot>
    </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import { deepClone } from "@/utils";

export default {
  comments:{
    // PullRefresh
  },
  name: "eagle-page-list",
  props: {

    isCustom: {
      type: Boolean,
      default: false,
    },
    pageSize: {
      type: Number,
      default: 20,
    },
    url: {
      type: String,
      default: "",
    },
    controller: {
      type: String,
      default: "",
    },
    method: {
      type: String,
      default: "/GetPageData",
    },
    queryParams: {
      type: Object,
      default: () => {
        return {};
      },
    },
    conditions: {
      type: Object,
      default: () => {
        return {};
      },
    },
    isShowSearch: {
      type: Boolean,
      default: true,
    },
    placeholder: {
      type: String,
      default: "搜索",
    },
    maxlength: {
      type: [Number, String],
      default: 100,
    },
    filterTab: {
      type: Boolean,
      default: false,
    },
    filterTabDefault: {
      type: String,
      default: "",
    },
    filterParams: {
      type: Array,
      default: () => [
        {
          name: "Type",
          title: "来源",
          data: [
            { text: "公共", value: "Sys" },
            { text: "公司", value: "Company" },
          ],
        },
      ],
    },
    isSticky: {
      type: Boolean,
      default: true,
    },
    isPage: {
      type: Boolean,
      default: () => true,
    },
    isFuzzyQuery: {
      type: Boolean,
      default: false,
    },
    fuzzyKey: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      selFilterParams: [],
      localParams: [],
      finished: false,
      loading: false,
      isLoading:false,
      listPaddingTop: 0,
      navHeight: 0,
      list: [],
      pageParams: {
        page: 0,
        pageSize: this.pageSize,
      },
      query: {
        url: "",
        params: {},
      },
      firstPage: 0,
      first: true,
      searchVal: "", //isShowSearch:false
      searchStyle: {},
    };
  },
  watch: {},
  // created() {
  //   if (!this.isShowSearch) {
  //     this.search();
  //   }
  // },
  created() {
    // for (let i = 0; i < this.params.length; i++) {
    this.localParams.push(
      Object.assign(
        { page: 0, limit: 20, badge: false, cnt: "", moreSearch: false }
        // this.params[i]
      )
    );
    // }
    this.resetParams = deepClone(this.localParams);
    this.first = true;
    this.isFirstLoad = true;
    this.active = 0;
    // for (var i = 0; i < this.localParams.length; i++) {
    //   if (i == 0 || this.localParams[i].badge) {
    //     this.getList(i);
    //   }
    // }
    this.search();
  },
  mounted() {
    if (this.isSticky) {
      this.listPaddingTop = window.getComputedStyle(this.$refs.element).height;
      if(document.getElementsByClassName("van-nav-bar")[0])
      {
        this.navHeight =
        document.getElementsByClassName("van-nav-bar")[0].offsetHeight + "px";
      }
      this.searchStyle.top = this.navHeight;
    } else {
      this.searchStyle = {};
    }
  },
  methods: {
    onRefresh(){
    
      this.getList()
      this.isLoading=false
    },
    search(config) {
      this.pageParams.page = this.firstPage;
      this.dealParams(config);
      if (this.filterTabDefault) {
        this.handleChange(this.filterTabDefault, this.filterParams[0]);
      } else {
        this.getList();
      }
    },
    dealParams(config) {
      this.query.url =
        config && config.url
          ? config.url
          : this.url
          ? this.url
          : this.controller + this.method;
      if (config) {
        if (config.params) {
          this.query.params = this.common.deepMerge(
            config.params,
            this.pageParams
          );
        } else {
          if ("keywords" in this.queryParams) {
            this.queryParams.keywords = this.searchVal;
          }
          this.query.params = this.common.deepMerge(
            this.queryParams,
            this.pageParams
          );
        }
        if (config.conditions) {
          this.query.params.conditions = config.conditions;
        } else {
          this.query.params.conditions = this.getCondtions();
        }
      } else {
        if (this.isShowSearch) {
          if (this.searchVal && "keywords" in this.queryParams) {
            this.queryParams.keywords = this.searchVal;
          }
        }

        this.query.params = this.common.deepMerge(
          this.queryParams,
          this.pageParams
        );
        this.query.params.conditions = this.getCondtions();
      }
    },
    getCondtions() {
      let conditionsArry = [];
      for (let key in this.conditions) {
        let op = this.conditions[key];
        let val = op.value;
        let operate = op.operate;
        if (val) {
          conditionsArry.push({
            Name: key,
            Operator: !operate ? "like" : operate,
            Value: val,
          });
        }
      }
      if (this.filterTab) {
        this.filterParams.forEach((condition) => {
          conditionsArry.push({
            Name: condition.name,
            DisplayName: condition.data[0] && condition.data[0].text,
            Value: condition.data[0] && condition.data[0].value,
            Operator: "=",
            DataType: condition.dataType ? condition.dataType : "String",
          });
        });
      }
      return conditionsArry && conditionsArry.length > 0
        ? JSON.stringify(conditionsArry)
        : conditionsArry;
    },
    loadMore() {
      if (!this.first) {
        this.query.params.page++;
        this.getList();
      }
    },
    getList() {
      if (this.isPage) {
        this.getListData();
      } else {
        this.getNoPageList();
      }
    },
    getListData() {
      this.loading = true;
      var _this = this;
      _this.$axios
        .get(this.query.url, { params: _this.query.params })
        .then((res) => {
          _this.loading = false;
          _this.pageParams.page = res.data.PageIndex;
          _this.first = false;
          if (this.pageParams.page == 0) {
            _this.list = res.data.Data;
          } else {
            _this.list = _this.list.concat(res.data.Data);
          }
          _this.finished = !res.data.HasNextPage;
          _this.$emit("bindData", _this.list);
        })
        .catch((err) => {
          console.log("err", err);
          _this.finished = true;
        });
    },
    getNoPageList() {
      let _this = this;
      _this.loading = true;
      _this.$axios
        .get(this.query.url, { params: _this.query.params })
        .then((res) => {
          _this.loading = false;
          _this.finished = true;
          _this.list = res.data;
          if (_this.isFuzzyQuery && _this.fuzzyKey && _this.searchVal) {
            _this.list = _this.fuzzyQuery(
              _this.list,
              _this.searchVal,
              _this.fuzzyKey
            );
          }
          _this.$emit("bindData", _this.list);
          _this.first = false;
        })
        .catch((err) => {
          console.log("err", err);
          _this.finished = true;
        });
    },
    fuzzyQuery(list, keyWord, type) {
      var arr = [];
      list.map((item) => {
        if (item[type].indexOf(keyWord) >= 0) {
          arr.push(item);
        }
      });
      return arr;
    },
    confirm() {
      this.isFirstLoad = false;
      this.localParams[this.active].page = 0;
      var conditions = [];
      if (this.searchVal) {
        conditions.push({
          Name: "Keywords",
          DisplayName: this.searchVal,
          Value: this.searchVal,
          Operator: "like",
          DataType: "String",
        });
      }
      if (this.selFilterParams.length > 0) {
        this.selFilterParams.forEach((condition) => {
          if (condition.data[0] && condition.data[0].value) {
            conditions.push({
              Name: condition.name,
              DisplayName: condition.data[0] && condition.data[0].text,
              Value: condition.data[0] && condition.data[0].value,
              Operator: "=",
              DataType: condition.dataType ? condition.dataType : "String",
            });
          }
        });
      }
      this.query.params.conditions = JSON.stringify(conditions);
      this.query.params.page = this.firstPage;
      this.getList();
    },
    clear() {
      this.searchVal = "";
      this.localParams = this.resetParams;
      this.confirm();
    },
    refresh() {
      this.conditions.Keywords = {
        value: this.searchVal,
      };
      if (this.filterTab) {
        this.filterParams.forEach((condition) => {
          this.conditions[condition.name] = {
            value: condition.name,
            operate: "=",
          };
        });
      }
      this.search({});
    },
    handleChange(value, data) {
      this.loading = false;
      this.finished = false;
      var selFilterParams = [];
      selFilterParams = this.selFilterParams;
      this.selFilterParams = deepClone(this.filterParams);
      var i = 0;
      this.selFilterParams.filter((item) => {
        if (item.name == data.name) {
          item.data = item.data.filter((it) => {
            return it.value === value;
          });
          if (item.data.length > 0) {
            data.title = item.data[0].text;
          }
        } else if (selFilterParams.length > 0) {
          item.data = selFilterParams[i].data;
        }
        i++;
        return item;
      });
      this.query.params.page = this.firstPage;
      this.confirm();
    },
  },
};
</script>
<style lang="less" scoped>
.wrap {
  width: 100%;
  position: fixed;
  z-index: 1000;
}
/deep/ .van-tabs__nav {
  margin: 0 10px !important;
}

/deep/ .van-dropdown-menu__bar {
  background-color: #fff;
}

/deep/ .van-dropdown-item {
  margin: 0 10px !important;
}

.search-more {
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  margin-top: 0.5rem;
}
</style>